<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>我的考勤</title>
</head>
<body>

<script type="text/javascript" src="./$.js"></script>
<script>
    require(['!this.js'], $$.load);
</script>
</body>
</html>

<!--tpl部分-->
<template data-name="this.htm">
    <div>
        <div class="me" v-if="data">
            <div class="info" v-if="data">
                <img v-if="data.avatar!=''" :src="data.avatar">
                <img v-else src="../$res/imgers/default_img.png">

                <div class="rightinfo">
                    <div class="infoperson">
                        <p>{{data.name}}</p>
                        <p>{{data.depart_name}}</p>
                    </div>
                    <div class="infowork">
                        <div class="infowork_single">
                            <div class="title">今日到岗时间</div>
                            <div class="content">{{data.first_time}}</div>
                        </div>
                        <div class="infowork_single">
                            <div class="title">今日工作时长</div>
                            <div class="content">{{data.total_time}}</div>
                        </div>
                        <div class="infowork_single" v-if="data.backToday==''">
                            <div v-if="data.work_status=='working'">
                                <div class="title">当前工作状态</div>
                                <div class="content">工作中</div>
                            </div>
                            <div v-else-if="data.work_status=='xiujia'">
                                <div class="title">当前工作状态</div>
                                <div class="content">休假中</div>
                            </div>
                            <div v-else-if="data.work_status=='xiuxi'">
                                <div class="title">当前工作状态</div>
                                <div class="content">休息中</div>
                            </div>
                            <div v-else-if="data.work_status=='learning'">
                                <div class="title">当前工作状态</div>
                                <div class="content">学习中</div>
                            </div>
                        </div>
                        <div class="infowork_single" v-else-if="data.backToday=='1'">
                            <div v-if="data.work_count=='ok'">
                                <div class="title">当日打卡情况</div>
                                <div class="content">正常</div>
                            </div>
                            <div v-if="data.work_count=='error'">
                                <div class="title">当日打卡情况</div>
                                <div class="content">
                                    <div class="contentwarm">异常</div>
                                </div>
                            </div>
                            <div v-if="data.work_count==''">
                                <div class="title">当日打卡情况</div>
                                <div class="content">未打卡</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="calendar">
                <div class="year">
                    <span>{{data.today}}</span>
                    <span v-if="data.backToday==1" @click="switch_day()">
                            返回今天
                        </span>
                    <span v-else></span>
                    <img v-if="data.backToday==1" src="../$res/imgers/right.png">
                </div>
                <div class="weekDay">
                    <div class="week">
                            <span v-for="days in data.days">
                                <div class="rest" v-if="days.week=='六'||days.week=='日'">{{days.week}}</div>
                                <div v-else="">{{days.week}}</div>
                            </span>
                    </div>
                    <div class="day" id="day">
                            <span v-for="(days,index) in data.days" @click="switch_day(days.simple,days.desc,index)">
                                <div v-if="days.ring==1">

                                    <div class="wrong_ring" v-if="days.status=='error'">
                                        <div class="wrong">{{days.day}}</div>
                                    </div>
                                    <div class="ok_ring" v-else-if="days.status=='ok'">
                                        <div class="ok">{{days.day}}</div>
                                    </div>
                                    <div class="singleday_ring" v-else-if="days.status==''">
                                        <div class="singleday">{{days.day}}</div>
                                    </div>
                                </div>
                                <div v-else>
                                    <div class="trans_ring" v-if="days.status=='error'">
                                        <div class="wrong">{{days.day}}</div>
                                    </div>
                                    <div class="trans_ring" v-else-if="days.status=='ok'">
                                        <div class="ok">{{days.day}}</div>
                                    </div>
                                    <div class="trans_ring" v-else-if="days.status==''">
                                        <div class="singleday">{{days.day}}</div>
                                    </div>
                                </div>
                            </span>
                    </div>
                </div>
            </div>

            <div class="work">
                <div class="registlist" v-for="logitem in data.work_log">
                    <div class="regist" v-if="logitem.status=='come'">
                        <img src="../$res/imgers/regist_arrive.png">
                        <span>签到</span>
                        <span>{{logitem.time}}</span>
                    </div>
                    <div class="regist" v-else-if="logitem.status=='leave'">
                        <img src="../$res/imgers/regist_leave.png">
                        <span>签退</span>
                        <span>{{logitem.time}}</span>
                    </div>
                </div>
            </div>
            <div class="more" @click="notWorking()" v-if="!userId">
                <div class="conten">
                    <span>申请补签</span>
                    <img src="../$res/imgers/arrow_right.png">
                </div>
            </div>

            <div class="no_con" v-if="data.work_log.length==0">
                <div class="conNull"></div>
                <div v-if="userId">
                    <p v-if="data.backToday==''">Ta今天没有打卡哦~</p>
                    <p v-if="data.backToday==1">Ta当天没有打卡哦~</p>
                </div>
            </div>
        </div>
        <div v-if="userId"></div>
        <div v-else>
            <foot current="me"></foot>
        </div>
    </div>
</template>

<!--JS部分-->
<script data-name="this.js">
    function notWorking() {
        $$.redirect('/kaoqin/buqian/add.html');
    }

    /*day:选择的那天的数字格式的日期
     detail：选择的那天的汉字格式的日期
     index：选择那天的下标位置*/
    function get_day_data(day, detail, index) {
        weui.loading('加载中');

        $$.ajax({
            url: "/kaoqin/me/index",
            data: {
                t: day,
                u: web.c.query.id
            },
            result: {
                $200: function (ret) {
                    weui.loading().hide();
                    $$.m.data = ret.data;
                    /* backToday: 方便模板判断是否需要显示'返回当天'按钮，判断显示'当日打卡情况'或'当前工作状态'
                     today: 方便模板显示今天或当天的日期。如果是切换过来的，在切换时会传过来那天是哪天。如果不是会取第一个数据即今天的那个字段。这个接口多少有点不太合适造成的
                     ring: 方便模板显示日历日期外面的那个圆环。如果是当天，第一个数据有圆环标记。如果是切换的日期，切换的对应的日期的圆环标记为1*/
                    if (day) {
                        if (index == 6) {
                            $$.m.data.backToday = '';
                        } else {
                            $$.m.data.backToday = 1;
                        }
                        $$.m.data.today = detail;
                        for (var i = 0; i < $$.m.data.days.length; i++) {
                            $$.m.data.days[i].ring = '';
                        }
                        $$.m.data.days[index].ring = 1;

                        console.log($$.m.data);
                    } else {
                        $$.m.data.backToday = "";
                        $$.m.data.today = ret.data.days[0].desc;
                        $$.m.data.days[6].ring = 1;

                        console.log($$.m.data);
                    }
                }
            }
        });
    }

    require('../$res/js/common');
    module.exports = {
        template: require('!this.htm'),
        components: {
            foot: web.foot
        },
        methods: {
            switch_day: get_day_data,
            notWorking: notWorking
        },
        loaded: function () {
            $$.m = {
                data: false,
                /*userId：模板根据有没有这个字段来决定显不显示foot。只有从全部考勤跳转过来的才有这个userId*/
                userId: web.c.query.id
            };

            /*当从全部考勤页面跳转到我的考勤页面，动态修改title*/
            if (web.c.query.name) {
                $$.fn.set_wx_title(decodeURI(web.c.query.name) + '的考勤');
            }
        },
        mounted: function () {
            get_day_data();
        }
    };
</script>
